<!DOCTYPE html>
<html>
<head>
    <title>MUKEFILE上传文件</title>
    <meta charset="utf-8">
    <link href="/lib/img/favicon.png" rel="shortcut icon" />
    <!--为了保证IE能够使用最新渲染模式而不是兼容模式-->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <!-- ZUI CSS 文件 -->
    <link rel="stylesheet" href="/zui/css/zui.min.css">
    <!-- ZUI Javascript 依赖 jQuery -->
    <script src="/zui/libs/jquery/jquery.js"></script>
    <!-- ZUI JavaScript 文件 -->
    <script src="/zui/js/zui.min.js"></script>
    <link href="/zui/libs/uploader/zui.uploader.min.css" rel="stylesheet">
    <script src="/zui/libs/uploader/zui.uploader.min.js"></script>

    <style>
        .main{width: 100%;min-width: 540px;height: 100vh;}
        .main-top{height: 80px;background-color: #3280fc;}
        /*系统logo 标题*/
        .main-title{padding-left: 50px;line-height: 80px;
            float: left;font-size: 40px;font-family: Poppins;}
        /*登录系统的用户*/
        .user-info{float: right;font-size: 20px;
            padding:30px 120px 30px 0;}
        .user{ float:left;}
        /*    头部样式  end      */
        .main-middle{width: 100%;}
        /*   左侧菜单列表样式	start	*/
        .main-middle-left{width: 200px; top: 80px; bottom: 40px;
            background-color: #f7f7f7; position: absolute;}
        .main-middle-left ul li{line-height: 40px;}
        .main-middle-right{position: absolute;left: 200px; right: 0;bottom: 40px;
            top:80px;}
        /*底部声明*/
        .main-bottom{width: 100%;height: 40px;clear: both;
            bottom: 0px; position: absolute;}
        .main-bottom-info{height: 40px;background-color: #c7cbd0;
            line-height: 40px;text-align: center;}
        .bottom{width: 100%;height: 40px;clear: both;
            bottom: 0;position: absolute;}
        .bottom-info{height: 40px;background-color: #c7cbd0;
            line-height: 40px;text-align: center;}
        /***首页部分样式表-结束***/

        #upload-content{
            width: 90%;
            height: 90%;
            margin-left: 5%;margin-top: 2%;
            /*margin-bottom: 3%;*/
        }

        #uploaderComponent{
            width: 90%;
            height: 76%;
            position: absolute;
            /*background-color: #0C0C0C;*/
        }
        #file-grid{
            height: 90%;
            overflow: auto;
        }
        #upload-title{
            font-family: Poppins;font-size: 16px;
            margin-bottom: 10px;
        }




    </style>
    <script type="text/javascript">

    </script>
</head>
<body>
<div class="main">

    <#include "common/top.ftl"/>


    <div class="main-middle">

        <#include "common/leftMenu.ftl"/>

        <div class="main-middle-right">
            <div id="upload-content">
<#--                <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">-->
<#--                    <button id="upload2" data-method="offset" data-type="rb" class="layui-btn layui-btn-normal">上传文件</button>-->
<#--                </div>-->
                <div id="upload-title">
                    <span>文件上传</span>
                </div>
                <div id='uploaderComponent' class="uploader" data-ride="uploader">
                    <div class="uploader-actions">
                        <div class="uploader-status pull-right text-muted"></div>
                        <button type="button" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> 选择文件</button>
                        <button type="button" class="btn btn-link uploader-btn-start"><i class="icon icon-cloud-upload"></i> 开始上传</button>
                    </div>
                    <div class="uploader-message text-center">
                        <div class="content"></div>
                        <button type="button" class="close">×</button>
                    </div>
                    <div id="file-grid" class="uploader-files file-list file-list-lg" data-drag-placeholder="请拖拽文件到此处"></div>
                </div>

                <script>
                    // 获取upload对象
                    let uploader = $('#uploaderComponent').data('zui.uploader');
                    $('#uploaderComponent').uploader({
                        url:'/mukeUpload!uploadFile',
                        chunk_size:'5000mb',
                        deleteActionOnDone: function (file, doRemoveFile) {
                            doRemoveFile();
                        },
                    });
                </script>
                <script>



                    // layui.use('layer', function(){
                    //     let layer = layui.layer;
                    //     $('#upload2').click(function () {
                    //         layer.open({
                    //             title:'上传列表',
                    //             type:1,
                    //             area: ['750px', '360px'],
                    //             content:$('#uploaderComponent'),
                    //         });
                    //     })
                    // });

                </script>


            </div>
        </div>
    </div>

    <#include "common/bottom.ftl"/>
</div>
</body>
</html>